<template>
  <view class="container_box">
    <view
      style="
        display: flex;
        justify-content: center;
        background-color: #3f83cc;
        align-items: center;
      "
    >
      <view
        :class="{
          login_title: true,
          login_title_active: active == 0,
        }"
        @click="active = 0"
        >全部</view
      >
      <view
        :class="{
          login_title: true,
          login_title_active: active == 1,
        }"
        @click="active = 1"
        >在线</view
      >
      <view
        :class="{
          login_title: true,
          login_title_active: active == 2,
        }"
        @click="active = 2"
        >离线</view
      >
    </view>

    <div class="container">
      <div class="card_item" v-for="(item, index) in list" :key="index" @click="goToDetail()">
        <div style="display: flex; justify-content: space-between">
          <div class="card_item_orderNo">{{ item.deviceId }}</div>
          <div class="card_item_title">{{ item.status }}</div>
        </div>

        <div class="card_item_title" style="margin-top: 20rpx">
          儿科病房医疗综合楼9楼
        </div>
      </div>
    </div>

    <u-popup :show="show" @close="close" @open="open">
      <view style="padding: 30rpx">
        <div class="pop_title">设备信息</div>
        <div class="flex">
          <div class="pop_desc_left">设备名称</div>
          <div class="pop_desc_right">{{ popDeivceInfo.name }}</div>
        </div>

        <div class="flex">
          <div class="pop_desc_left">设备编号</div>
          <div class="pop_desc_right">{{ popDeivceInfo.code }}</div>
        </div>

        <div class="flex">
          <div class="pop_desc_left">当前状态</div>
          <div class="pop_desc_right">{{ popDeivceInfo.status }}</div>
        </div>

        <div class="flex">
          <div class="pop_desc_left">是否故障</div>
          <div class="pop_desc_right">{{ popDeivceInfo.default }}</div>
        </div>

        <div class="flex">
          <div class="pop_desc_left">机构</div>
          <div class="pop_desc_right">{{ popDeivceInfo.jigou }}</div>
        </div>

        <div class="flex">
          <div class="pop_desc_left">科室</div>
          <div class="pop_desc_right">{{ popDeivceInfo.keshi }}</div>
        </div>

        <div class="flex">
          <div class="pop_desc_left">楼层</div>
          <div class="pop_desc_right">{{ popDeivceInfo.louceng }}</div>
        </div>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          // 设备号
          deviceId: "SN564564654",
          // 位置
          lcoation: "儿科8楼",
          // 状态
          status: "正在使用",
        },
      ],
      active: 0,
      show: false,
      popDeivceInfo: {
        // 设备名称
        name: "设备名称",
        // 设备编码
        code: "SN564564654",
        // 当前状态
        status: "正在使用",
        // 是否故障
        fault: "否",
        // 机构
        jigou: "机构名称",
        // 科室
        keshi: "泌尿科",
        // 楼层
        louceng: 8,
      },
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {},

  methods: {
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    goToDetail() {
      console.log('点击事情');
      
      this.show = true;
    }
  },
};
</script>

<style lang="scss" scoped>
.container_box {
  background: #f4f4f4;
  height: 100vh;
}
.container {
  background: #f4f4f4;
  padding: 20rpx;
}

.card_item {
  height: 150rpx;
  line-height: 40rpx;
  border-radius: 24rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 28rpx;
  text-align: center;
  font-family: PingFangSC-regular;

  padding: 20rpx 30rpx;
}

.card_item_orderNo {
  color: rgba(255, 72, 72, 1);
  font-size: 32rpx;
  text-align: left;
  font-family: PingFangSC-regular;
}

.card_item_title {
  color: rgba(16, 16, 16, 1);
  font-size: 32rpx;
  text-align: left;
  font-family: PingFangSC-regular;
}

.login_title {
  width: 33%;
  display: flex;
  justify-content: center;
  padding-top: 28rpx;
  padding-bottom: 28rpx;

  color: rgba(251, 251, 251, 1);
  font-size: 36rpx;
  text-align: left;
  font-family: PingFangSC-regular;
  align-items: center;
}

.login_title_active {
  width: 216rpx;
  height: 66rpx;
  line-height: 46rpx;
  border-radius: 34rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(101, 175, 80, 1);
  font-size: 32rpx;
  text-align: center;
  font-family: PingFangSC-bold;
}

.title_title {
  color: rgba(114, 182, 95, 1);
  font-size: 40rpx;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26rpx;
}
.text {
  height: 46rpx;
  line-height: 46rpx;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.pop_title {
  color: rgba(0, 0, 0, 1);
  font-size: 36rpx;
  text-align: left;
  font-family: SourceHanSansSC-bold;
}

.pop_desc_left {
  color: rgba(0, 0, 0, 1);
  font-size: 36rpx;
  text-align: left;
  font-family: SourceHanSansSC-bold;
}

.pop_desc_right {
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  text-align: right;
  font-family: SourceHanSansSC-regular;
}
</style>
